<template>
    <div class="ctable">
        <el-table :data="tableData" style="width: 100%;background:#032754" row-class-name="rowStyle" header-row-class-name="headerStyle">
            <el-table-column v-for="(item, index) in column" :key="index" :prop="item.prop" :label="item.label" align="center" show-overflow-tooltip></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    props: {
        config: {
            type: Object,
        },
    },
    data() {
        return {
            tableData: [],
            column: [],
        };
    },
    methods: {
        spanMethod({ row, columnIndex }) {
            if (columnIndex === 0) {
                if (row.spanIndex) {
                    return {
                        rowspan: row.spanIndex,
                        colspan: 1,
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    };
                }
            }
        },
    },
    watch: {
        config: {
            handler(val) {
                let obj = val.demoOption.data;
                this.column = [];
                for (let i in obj.fieldMap) {
                    this.column.push({
                        prop: i,
                        label: obj.fieldMap[i],
                    });
                }
                this.tableData = [];
                obj.keyMap.forEach(item => {
                    let arr = JSON.parse(JSON.stringify(obj[item.code]));
                    arr[0].spanIndex = arr.length;
                    this.tableData = [...this.tableData, ...arr];
                });
            },
            deep: true,
            immediate: true,
        },
    }
};
</script>

<style lang="scss">
.ctable{
    height: 100%;
    .el-table::before {
        height: 0px;
    }
    .el-table{
        height: 100%;
        overflow: auto;
    }
    tr.rowStyle {
        background: linear-gradient(to right, #073563, #022754);
        color: #fff;
        td {
            border-bottom: 4px solid #032754;
            position: relative;
            .cell {
                font-size: 14px;
            }
        }
        td:first-child::before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            display: block;
            width: 3px;
            height: 100%;
            border-left: 3px solid #6EC8EC;
        }
    }
    .headerStyle th{
        background-color: #032754;
        border-bottom: none !important;
        .cell {
            color: #D5E1F9;
            font-size: 14px;
            font-weight: normal;
        }
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #073563;
    }
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar
    {
        width: 8px;
        height: 8px;
        background-color: rgb(5,47,92);
    }
     
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: rgb(5,47,92);
    }
     
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb
    {
        border-radius: 6px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: rgb(8, 85, 168);
    }

}
</style>
